<template>
  <div class="index-conntainer">
   
    <!-- 查询条件 -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item :label="t('merchand.name')" prop="name">
          <el-input
            v-model="queryParams.name"
            :placeholder="t('merchand.name')"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
         
        
        <el-form-item>
          <el-button type="primary" @click="handleQuery()"><i-ep-search />{{ t('common.search') }}</el-button>
         <!-- <el-button @click="resetQuery()"><i-ep-refresh />{{ t('common.reset') }}</el-button> -->
        </el-form-item>
      </el-form>
    </div> 
    
    
    <!--表格显示数据 -->
    <el-table v-loading="loading" :data="rows"   >
      
         <el-table-column :label="t('merchand.name')" align="left" prop="name" />          
         
         <el-table-column :label="t('common.operate')" width="250" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="icon-full-selection"  @click="handlerChoose(scope.row)" >{{t('common.categoryView')}}</el-button>
                                           
            </template>
         </el-table-column>
      </el-table>
        
       <el-pagination
            v-if="total>0"
            v-model:current-page="queryParams.page"
            v-model:page-size="queryParams.size"
            :page-sizes="[10, 20, 30, 40,50,100]"
            small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
     
  </div>
</template>

<script setup>
  import { ref} from 'vue'
  import { Plus } from '@element-plus/icons-vue' 
  import { ElMessage } from 'element-plus'
  import store from '@/store/index.js'
  //定义国际化的语言的文件
  import { useI18n } from 'vue-i18n';
  const { t } = useI18n();
  
  //组合式函数(代码重复的问题)
  import { usePage } from '@/composables/PageComp.js'
  import {dataApi} from '@/api/merchandiser.js'
  
  const { proxy } = getCurrentInstance(); 
  //通用数据必须要有的
  const reactiveObject = ref({
     dataApi: dataApi,   
     proxy: proxy,
     //这里要变，主键名称
     primaryKey: 'id'
    });   
  //分页查询
  const { loading, total,rows ,queryParams ,autoExecute,ids,single,multiple , handleQuery, resetQuery, handleSizeChange , handleCurrentChange, getList,handleSelectionChange }=usePage(reactiveObject)
   
   //不要自动执行，需要自己传参
   autoExecute.value=false 
   
   function initMethod(){
     queryParams.value.status ='1'
     handleQuery()
   }
   
   //执行自己的方法
   initMethod();
   
   
   //选择查看详情
   function handlerChoose(row){
     proxy.$emit('choose',row)
   }
   
</script>

<style>
</style>
